<template>
  <div id="box">
    <div class="head">
      <span>中国新闻网</span>
      <el-row>
        <el-button @click="add()">添加</el-button>
      </el-row>
    </div>
    <div>
      <ul>
        <li v-for="item in data" :key="item.id" >
          <div>
            <span class="titles">{{ item.titles }}</span><br>
            <span class="contents">{{ item.contents }}</span>&ensp;&ensp;
            <span>{{ item.cretatime }}</span><br>
            <span>上传者：{{ item.username }}</span><br>
            <span>{{ item.type | Type( )}}</span><br>
            <span>👍点赞量{{ item.num }}</span>
            <button @click="addNum(item.id)">点赞</button>
          </div>
          <el-row>
            <el-button type="danger" @click="del(item.id)" plain>删除</el-button>
          </el-row>
        </li>
      </ul>
    </div>
    <div>
      <el-pagination
      :page-size="1"
      :pager-count="11"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
        :total="max_page">
      </el-pagination>
    </div>


    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="新闻标题" :label-width="formLabelWidth">
          <el-input v-model="form.contents" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="新闻内容" :label-width="formLabelWidth">
          <el-input v-model="form.titles" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="创建时间" :label-width="formLabelWidth" >
          <div class="block">
            <el-date-picker
            value-format="yyyy-MM-dd"
              v-model="form.cretatime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="添加者用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form">
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-radio v-model="form.type" label="1">娱乐</el-radio>
          <el-radio v-model="form.type" label="2">军事</el-radio>
          <el-radio v-model="form.type" label="3">体育</el-radio>
        </el-form-item>
      </el-form>

      <el-form :model="form">
        <el-form-item label="点赞数量" :label-width="formLabelWidth">
          <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click=sure_add()>确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>
<script>
  // 导入组件
  import {newsList,addNews,delNews,addNum} from '@/utils/https'
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'HomeView',
    // 数据
    data () {
      return {
        data:[],
        max_page:20,
        dialogFormVisible:false,
         form: {
          contents: '',
          titles: '',
          cretatime: '',
          username: '',
          type: '',
          num:''
        },
        formLabelWidth: '120px'
       }
     },
     // 实例方法
     methods: {
      // 点赞
      addNum(id){
        addNum({
          id
        })
        .then(val=>{
          this.newsList()
          // 弹窗提示
          this.$message({
          message: val.msg,
          type: 'success'
        });
        })
        .catch(err=>{
          console.log(err);
        })
      },

      // 删除
      del(id){
        delNews({
          id
        })
        .then(val=>{
          console.log(val);
          this.newsList()
          // 弹窗提示
          this.$message({
          message: val.msg,
          type: 'success'
        });
        })
        .catch(err=>{
          console.log(err);
        })
      },

      // 确认添加
      sure_add(){
        this.dialogFormVisible = false
        addNews(this.form)
        .then(val=>{
          this.newsList()
          // 弹窗提示
          this.$message({
          message: val.msg,
          type: 'success'
        });
        })
        .catch(err=>{
          console.log(err);
        })
      },

      // 添加显示
      add(){
        this.dialogFormVisible = true
      },


      // 新闻列表接口
      newsList(page=1){
      newsList({
        page
      })
      .then(val=>{
        // 更新数据
        this.data=val.data.data
        // 更新最大页数
        this.max_page=val.data.allpage
      })
      .catch(err=>{
        console.log(err);
      })
      },

      // 换页
      handleCurrentChange(val){
        this.newsList(val)
      }
     },
     // 计算属性
     computed: {
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
     },
     // 挂载后（既能访问数据，也能操作dom）
     mounted () {
      this.newsList()
     },
     // 过滤器
     filters: {
      // 类型过滤
      Type(val){
        if(val==1){
          return '娱乐'
        }else if(val==2){
          return '军事'
        }else if(val==3){
          return '体育'
        }
      }
     }
  }
</script>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #box{
    height: 100vh;
    width:100vh;
  }
  .head{
    height: 15%;
    background-color: #1E4295;
    color: white;
  }
  li{
    border-bottom:1px  rgba(128, 128, 128, 0.221)  solid;
    display: flex;
    justify-content: space-between;
  }

  .titles{
    font-size: 25px;
  }
  
  .contents{
    color: #C3C4C3;
  }

  
</style>
